import React, { Fragment, PureComponent } from 'react'
import { connect } from 'dva'
import { OssUpload } from 'scd'
import { Col, Checkbox, Form, Input, Spin, Icon } from 'antd'
const FormItem = Form.Item;

@connect(({ loading, dispatch, app }) => ({
  app: app,
  loading: loading.effects['app/searchOrganizTree'],
  fileloading: loading.effects['app/getFileDownloadUrl'],
}))
@Form.create()

class ModalForm extends PureComponent {

  normFile = e => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  render() {
    // const { fileList, previewVisible, previewImage, } = this.state;
    const { form, modalType, fileloading, app: { singleOriginal, imgUrlList } } = this.props
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 19,
          offset: 5,
        },
      },
    };
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">上传</div>
      </div>
    )
    return (
      <Spin
        size="small"
        spinning={!!fileloading}
        tip="加载中..." >
        <Form layout="horizontal">
          <FormItem {...formItemLayout} label="组织名称">
            {form.getFieldDecorator('name', {
              initialValue: modalType === 'edit' ? singleOriginal && singleOriginal.name : null,
              rules: [{ required: true, message: '组织名称不能为空' }],
            })(<Input placeholder="请输入公司名称" />)}
          </FormItem>
          <FormItem {...formItemLayout} label="组织说明" >
            {form.getFieldDecorator('orgDescribe', {
              initialValue: modalType === 'edit' ? singleOriginal && singleOriginal.orgDescribe : null,
            })
              (<Input.TextArea style={{ height: '100px' }} placeholder="请输入描述" />)
            }
          </FormItem>
          {imgUrlList && <FormItem {...formItemLayout} label="组织logo">
            <Col>
              <p>请上传背景是透明的.png格式的logo图片，每张图片大小5m以内.</p>
              {form.getFieldDecorator('orgLogo', {
                valuePropName: 'fileList',
                getValueFromEvent: this.normFile,
                initialValue: [{
                  uid: imgUrlList[0].fileInfoId,
                  name: imgUrlList[0].fileName,
                  expireIn: imgUrlList[0].expireIn,
                  thumbUrl: imgUrlList[0].downloadUrl,
                  url: imgUrlList[0].downloadUrl,
                }],
              })(
                <OssUpload
                  name="logo"
                  listType="picture-card"
                  data={{
                    businessId: 0,
                    businessType: 'string',
                    companyId: 0,
                    digestMethod: 1,
                    ext: '',
                    moduleCode: 'company',
                    productLineId: 0,
                    userId: 1,
                  }}
                >
                  {form.getFieldValue('orgLogo') && form.getFieldValue('orgLogo').length === 1 ? null : (uploadButton)}
                </OssUpload>
              )}
            </Col>
          </FormItem>}
          <FormItem {...tailFormItemLayout}>
            {form.getFieldDecorator('isOpen', {
              valuePropName: 'checked',
              initialValue: modalType === 'edit' ? singleOriginal.isOpen === 1 ? false : true : true,
            })(
              <Checkbox>公开让用户加入</Checkbox>
            )}
          </FormItem>
          <FormItem {...tailFormItemLayout}>
            {form.getFieldDecorator('orgState', {
              valuePropName: 'checked',
              initialValue: modalType === 'edit' ? singleOriginal.orgState === 1 ? false : true : true,
            })(
              <Checkbox>启用此组织</Checkbox>
            )}
          </FormItem>
        </Form>
      </Spin>
    );
  }
}

export default ModalForm;









